<template>
  <div class="infoTable-containner">
    <div class="tableSearch">
      <el-form :inline="true"  class="demo-form-inline"  size="mini" >
        <el-form-item label="站点编号:">
          <el-input v-model="heartSiteId"></el-input>
        </el-form-item>
        <el-form-item label="站点名称:">
          <el-input v-model="heartSiteName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="conditionSearch()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="resetSearch()" >重置</el-button>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<el-button type="info" @click="testNUm()" >test</el-button>-->
        <!--</el-form-item>-->
      </el-form>
    </div>
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="CurrentChange"
        @size-change="SizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div  class="tableList">
      <el-table
        :data="heartBeat"
        border
        stripe border fit highlight-current-row
        style="width: 100%;max-height:780px;"
        :height="780"
        :header-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :show-overflow-tooltip="true"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="180px"
        >
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailDialog(scope.$index, heartBeat)" class="tableIcon" title="查看" type="text">
              <i class="lookDetail"></i>
            </el-button>
            <el-button @click.native.prevent="redactDialog(scope.$index, heartBeat)" class="tableIcon" title="编辑" type="text">
              <i class="redactDetail"></i>
            </el-button>
            <div class="divide"></div>
            <el-button v-if="scope.row.authz === 2 || scope.row.authz === 3 " @click.native.prevent="approveDialog(scope.$index, heartBeat)"  class="tableIcon" title="认证" type="text" size="small">
              <span  style="font-size: 12px; border: 2px solid #0072F3; margin-top: -18px; padding: 3px; position: absolute; color: #0072F3; border-radius: 4px">认证</span>
            </el-button>
            <el-button v-if="scope.row.authz === 1" @click.native.prevent="cancelDialog(scope.$index, heartBeat)" class="tableIcon" title="取消认证" type="text" size="small">
              <span  style="font-size: 12px; border: 2px solid #D05133; margin-top: -18px; padding: 3px; position: absolute; color: #E08A76; border-radius: 4px">取消认证</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dialog-detail  v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="detailDialogShow" @giveFalse="detailDialogReturn" ></dialog-detail>
    <dialog-redact  v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="redactDialogShow" @giveFalse="redactDialogReturn" ></dialog-redact>
    <dialog-conflict v-if="conflictDialogShow" @giveFalse="conflictReturn" ></dialog-conflict>
    <dialog-approve v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="approveDialogShow" @giveFalse="approveReturn" ></dialog-approve>
    <massage-cancel v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="cancelDialogShow" @giveFalse="cancelReturn"></massage-cancel>
  </div>
</template>
<script>
  import dialogDetail from './detailsDialog'
  import dialogRedact from './redactDialog'
  import dialogConflict from './conflictDialog'
  import dialogApprove from './approveDialog'
  import massageCancel from './cancelAlarm'
  import axios from 'axios'

  export default {
    props: {
      num: ''
    },
    components: { dialogDetail, dialogRedact, dialogConflict, dialogApprove, massageCancel },
    data() {
      return {
        // 下拉
        options: [],
        value5: [],
        // 时间
        value1: '',
        cols: [
          { prop: 'pid', label: '站点编号', width: '190px', sortable: true },
          { prop: 'name', label: '站点名称', width: '400px' },
          { prop: 'refresh_interval', label: '心跳频率', width: '120px' },
          { prop: 'timeout', label: '超时时间' },
          { prop: 'conn_status', label: '连接状态', sortable: true },
          { prop: 'authz_label', label: '认证状态', sortable: true },
          { prop: 'conn_time', label: '接入时间', width: '180px' },
          { prop: 'expire_time', label: '到期时间', width: '180px' }
          // { prop: 'address', label: '操作', width: '180px' }
        ],
        heartBeat: [],
        indexMethod: '',
        total: 0,
        ListQuery: {
          page: 1,
          limit: 20
        },
        detailDialogShow: false,
        redactDialogShow: false,
        conflictDialogShow: false,
        approveDialogShow: false,
        cancelDialogShow: false,
        // 父组件传参
        userIndex: '',
        userRow: '',
        // 条件插叙
        heartSiteId: '',
        heartSiteName: '',
        // 以下为接口
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'heartbeat_condition',
          data: {
            condition: {
              pid: '',
              name: '',
              authz: this.num
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        }
      }
    },
    mounted() {
      this.showNum()
      console.log(11111111111)
      console.log(this.num)
    },
    methods: {
      // 接受Nav的值
      showNum() {
        if (this.num === 0) {
          this.queryData()
          console.log(this.num)
        }
      },
      testNUm() {
        if (this.num >= 0) {
          this.queryData()
          console.log(this.num)
        }
      },
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.getheartBeat()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.heartBeat()
      },
      // 条件查询
      conditionSearch() {
        this.submitdata.data.condition.pid = this.heartSiteId
        this.submitdata.data.condition.name = this.heartSiteName
        this.queryData()
      },
      resetSearch() {
        this.heartSiteId = ''
        this.heartSiteName = ''
      },
      // 父组件传值
      // 点击控制dialog布尔值
      detailDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.detailDialogShow = !this.detailDialogShow
      },
      redactDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.redactDialogShow = !this.redactDialogShow
      },
      conflictDialog() {
        this.conflictDialogShow = !this.conflictDialogShow
      },
      approveDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.approveDialogShow = !this.approveDialogShow
      },
      cancelDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.cancelDialogShow = !this.cancelDialogShow
      },
      // 父组件接收值
      detailDialogReturn(data) {
        this.detailDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
      },
      redactDialogReturn(data) {
        this.redactDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
      },
      conflictReturn(data) {
        this.conflictDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
      },
      approveReturn(data) {
        this.approveDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
      },
      cancelReturn(data) {
        this.cancelDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11')
        console.log(data)
      },
      // 以下都是接口获取的方法
      // 获取列表信息
      queryData() {
        /* 有登录后可调整为以下代码**/
        /*
        updateRecord(this.submitdata).then(res => {
          console.log(11111111111111)
          console.log(res)
          this.$router.push({
            // path: 'usermanage'
          })
        }).catch(() => {
          console.log('失败!')
          return
        })*/
        // 配置更新总览
        axios.post('/heartbeat', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.heartBeat = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          console.log(this.heartBeat)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.submitdata.data.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitdata.data.page.page_size = (pageSize) + ''
        this.queryData()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .infoTable-containner{
    width: 100%;
    min-height: 500px;

    .tableList{
      width: 100%;
      min-height:20vw;
    }
    .footerPage{
      float: right;
      top: 10px;
      position: relative;
    }


  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/  .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }
  /***********************操作列样式**************************/
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  .divide{
    display: inline-block;
    border: 1px solid #CCC;
    height: 19px;
    position: relative;
    top: 2px;
    margin: 0 6px;
  }
  /deep/ .el-button+.el-button{
    margin-left: 3px;
  }
  .redactDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/redact_normal.png');
  }
  .redactDetail:hover{
    background-image: url('../../../../assets/reports/redact_hover.png');
  }
  .lookDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/detail_normal.png');
  }
  .lookDetail:hover{
    background-image: url('../../../../assets/reports/detail_hover.png');
  }
  /***************站点搜索框自定义样式*****************/
  .tableSearch{
    float: left;
  }
  /deep/ .tableSearch > .el-form > .el-form-item{
    margin-right: 6px;
    margin-bottom: 0;
    padding: 11px 0;
  }
</style>
